<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="买家秀"
      :visible.sync="buyerShowDialogShowed"
      :columns="buyerShowColumns"
      @submit="handleSubmitBuyerShow"
    />
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="追评"
      :visible.sync="appendDialogShowed"
      :columns="appendColumns"
      @submit="handleSaveAppendComment"
    />
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="刷单"
      :visible.sync="clickFarmDialogShowed"
      :columns="clickFarmColumns"
      @submit="handleSubmitClickFarm"
    />
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="跟进刷单时间"
      :visible.sync="signTimeDialogShowed"
      :columns="signTimeColumns"
      @submit="handleSaveUpdateFollowSignTime"
    />
    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入签收"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh">
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入记录的数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/import_example_comment_follow_sign.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader title="上传导入文件" icon="" size="mini" type="primary" action="/api/cmt/comment-follow-up/import-sign"
                       @success="handleImportSuccess"/>
        <div class="flex-con"></div>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import WanWanStatusEnum from '@/feature/cmt/infra/constants/WanWanStatusEnum'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import OnlineStatusEnum from '@/framework/constant/OnlineStatusEnum'
import {commentFollowUpApi} from '@/feature/cmt/infra/api/commentFollowUpApi'
import CURDTable from '@/framework/components/table/CURDTable'
import DialogColumnsForm from "@/framework/components/form/DialogColumnsForm";
import {adminApi} from "@/feature/mgr/infra/api/adminApi";
import {storeApi} from "@/feature/mct/infra/api/storeApi";
import {complainFollowUpApi} from "@/feature/cmt/infra/api/complainFollowUpApi";
import DateType from "@/framework/constant/DateType";
import FileUploader from "@/framework/components/FileUploader";

export default {
  components: {FileUploader, DialogColumnsForm, CURDTable},
  data() {
    return {
      buyerShowDialogShowed: false,
      importDialogShowed: false,
      appendDialogShowed: false,
      formData: {},
      clickFarmDialogShowed: false,
      signTimeDialogShowed: false,
      appendColumns: [
        {
          label: '追评日期',
          type: ColumnType.DATE,
          prop: 'appendCommentDate'
        },
        {
          label: '追评图片编码',
          type: ColumnType.TEXT,
          required: true,
          prop: 'appendPicNo'
        },
        {
          label: '追评',
          type: ColumnType.TEXTAREA,
          required: true,
          span: 24,
          prop: 'appendComment'
        }
      ],
      signTimeColumns: [
        {
          label: '跟进时间',
          // hiddenInForm: true,
          type: ColumnType.DATE,
          prop: 'followUpDate'
        },
        {
          label: '是否已签收',
          type: ColumnType.RADIO,
          searchable: true,
          required: true,
          width: 100,
          options: YesNoEnum,
          prop: 'signInfoFlag'
        },
        {
          label: '签收日期',
          type: ColumnType.DATE,
          prop: 'signDate'
        }
      ],
      buyerShowColumns: [
        {
          label: '买家秀日期',
          type: ColumnType.DATE,
          prop: 'buyerShowDate'
        },
        {
          label: '买家秀编码',
          type: ColumnType.TEXT,
          required: false,
          prop: 'buyerShowNo'
        },
        // {
        //   label: '买家秀图片编码',
        //   type: ColumnType.TEXT,
        //   required: true,
        //   prop: 'buyerShowPicNo'
        // },
        {
          label: '是否问大家',
          required: true,
          span: 12,
          options: YesNoEnum,
          type: ColumnType.RADIO,
          prop: 'askOtherFlag'
        }, {
          label: '评语买家秀是否发给客户',
          required: true,
          prop: 'buyerCommentSendFlag',
          type: ColumnType.RADIO,
          options: YesNoEnum
        }, {
          label: '是否评语',
          required: true,
          span: 12,
          options: YesNoEnum,
          type: ColumnType.RADIO,
          prop: 'commentInfoFlag'
        },
        {
          label: '评语日期',
          type: ColumnType.DATE,
          prop: 'commentInfoDate'
        },
        {
          label: '评语',
          required: false,
          span: 24,
          type: ColumnType.TEXTAREA,
          prop: 'commentWords'
        }
      ],
      clickFarmColumns: [
        {
          label: '公司微信号',
          prop: 'companyWxNo'
        },
        {
          label: '客户微信号',
          prop: 'customerWxNo'
        },
        {
          label: '旺旺号',
          prop: 'wanWanNo'
        },
        // {
        //   label: '旺旺号是否停用',
        //   prop: 'wanWanStatus',
        //   type: ColumnType.RADIO,
        //   options: WanWanStatusEnum
        // },
        {
          label: '备注',
          type: ColumnType.TEXTAREA,
          prop: 'remark'
        },
        {
          label: '本金',
          type: ColumnType.NUMBER,
          required: true,
          prop: 'principalAmount'
        },
        {
          label: '佣金',
          type: ColumnType.NUMBER,
          hiddenInForm: true,
          prop: 'commissionAmount'
        },
        {
          label: 'sku',
          type: ColumnType.TEXTAREA,
          prop: 'sku'
        }
        // {
        //   label: '是否上评语',
        //   prop: 'commentFlag',
        //   type: ColumnType.RADIO,
        //   options: YesNoEnum
        // },
        // {
        //   label: '是否上买家秀',
        //   prop: 'buyerShowFlag',
        //   type: ColumnType.RADIO,
        //   options: YesNoEnum
        // },
        // {
        //   label: '是否上追评',
        //   prop: 'appendCommentFlag',
        //   type: ColumnType.RADIO,
        //   options: YesNoEnum
        // }
      ],
      option: {
        requestApi: commentFollowUpApi,
        showSelection: false,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '填词日期',
            type: ColumnType.DATE,
            width: 100,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            required: true,
            searchable: true,
            prop: 'commentDate'
          }, {
            label: '是否已上买家秀',
            type: ColumnType.SELECT,
            searchable: true,
            hiddenInForm: true,
            width: 130,
            options: YesNoEnum,
            prop: 'buyerShowInfoFlag'
          }, {
            label: '是否已签收',
            type: ColumnType.RADIO,
            searchable: true,
            hiddenInForm: true,
            width: 100,
            options: YesNoEnum,
            prop: 'signInfoFlag'
          }, {
            label: '是否问大家',
            required: true,
            width: 100,
            options: YesNoEnum,
            hiddenInForm: true,
            type: ColumnType.RADIO,
            prop: 'askOtherFlag'
          }, {
            label: '是否评语',
            hiddenInForm: true,
            width: 80,
            searchable: true,
            type: ColumnType.RADIO,
            options: YesNoEnum,
            prop: 'commentInfoFlag'
          }, {
            label: '是否追评',
            required: true,
            type: ColumnType.SELECT,
            hiddenInForm: true,
            width: 100,
            searchable: true,
            options: YesNoEnum,
            prop: 'appendCommentInfoFlag'
          }, {
            label: '是否刷单',
            required: true,
            width: 100,
            type: ColumnType.SELECT,
            hiddenInForm: true,
            searchable: true,
            options: YesNoEnum,
            prop: 'clickFarmInfoFlag'
          },
          {
            label: '买家秀编码',
            type: ColumnType.TEXT,
            required: true,
            hiddenInForm: true,
            width: 120,
            searchable: true,
            prop: 'buyerShowNo'
          },
          {
            label: '填词负责人',
            prop: 'chargeManId',
            width: 100,
            searchable: true,
            hiddenInForm: true,
            options: adminApi.listAll(),
            required: true,
            type: ColumnType.SELECT
          },
          {
            label: '商品ID',
            required: true,
            searchable: true,
            onChange: ({value, formData}) => {
              if (formData.productNo && formData.productNo.trim().length >= 4) {
                commentFollowUpApi.countByProductNo(formData.productNo.trim()).then(formData.productNo.trim()).then(data => {
                  formData.dayNum = data + 1
                })
              }
            },
            prop: 'productNo'
          },
          {
            label: '货号/ID',
            searchable: true,
            prop: 'itemNo'
          },
          {
            label: '上新日期',
            required: true,
            searchable: true,
            type: ColumnType.DATE,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            prop: 'newArrivalDate'
          },
          {
            label: '刷单天数',
            prop: 'dayNum',
            required: true,
            width: 80,
            defaultValue: 1,
            type: ColumnType.NUMBER
          },
          {
            label: '主图',
            width: 100,
            type: ColumnType.IMAGE,
            prop: 'mainImg'
          },
          {
            label: '填词',
            required: true,
            span: 24,
            searchable: true,
            type: ColumnType.TEXTAREA,
            prop: 'content'
          },
          {
            label: '修改后',
            span: 24,
            type: ColumnType.TEXTAREA,
            prop: 'afterAlter'
          },
          {
            label: '买家秀负责人',
            prop: 'buyerShowChargeManId',
            searchable: true,
            type: ColumnType.SELECT,
            options: adminApi.listAll(),
            hiddenInForm: true
          },
          {
            label: '买家秀日期',
            hiddenInForm: true,
            prop: 'buyerShowDate'
          },
          {
            label: '评语日期',
            hiddenInForm: true,
            searchable: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            type: ColumnType.DATE,
            prop: 'commentInfoDate'
          }, {
            label: '评语',
            hiddenInForm: true,
            prop: 'commentWords'
          },
          // {
          //   label: '买家秀图片编码',
          //   hiddenInForm: true,
          //   prop: 'buyerShowPicNo'
          // },
          {
            label: '追评',
            hiddenInForm: true,
            prop: 'appendComment'
          }, {
            label: '追评日期',
            type: ColumnType.DATE,
            width: 120,
            searchable: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            hiddenInForm: true,
            prop: 'appendCommentDate'
          },
          {
            label: '追评图片编码',
            hiddenInForm: true,
            prop: 'appendPicNo'
          },
          {
            label: '刷单负责人',
            prop: 'clickFarmingChargeManId',
            searchable: true,
            options: adminApi.listAll(),
            hiddenInForm: true,
            type: ColumnType.SELECT
          },
          {
            label: '跟进时间',
            hiddenInForm: true,
            type: ColumnType.DATE,
            prop: 'followUpDate'
          },
          {
            label: '签收日期',
            type: ColumnType.DATE,
            hiddenInForm: true,
            prop: 'signDate'
          },
          {
            label: '公司微信号',
            hiddenInForm: true,
            prop: 'companyWxNo'
          },
          {
            label: '客户微信号',
            hiddenInForm: true,
            prop: 'customerWxNo'
          },
          {
            label: '旺旺号',
            hiddenInForm: true,
            prop: 'wanWanNo'
          },
          {
            label: '旺旺号是否停用',
            prop: 'wanWanStatus',
            hiddenInForm: true,
            type: ColumnType.RADIO,
            options: WanWanStatusEnum
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          },

          {
            label: '备注',
            hiddenInForm: true,
            prop: 'remark'
          },
          {
            label: '本金',
            hiddenInForm: true,
            width: 80,
            type: ColumnType.MONEY,
            prop: 'principalAmount'
          },
          {
            label: '佣金',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.MONEY,
            prop: 'commissionAmount'
          }, {
            label: '应返金额',
            type: ColumnType.MONEY,
            width: 100,
            hiddenInForm: true,
            prop: 'returnAmount'
          },
          {
            label: 'sku',
            type: ColumnType.TEXTAREA,
            hiddenInForm: true,
            prop: 'sku'
          },
          {
            label: '跟进时间',
            hiddenInForm: true,
            type: ColumnType.DATE,
            prop: 'followUpDate'
          },
          {
            label: '签收日期',
            type: ColumnType.DATE,
            hiddenInForm: true,
            prop: 'signDate'
          },
          {
            label: '评语和买家秀是否发送',
            prop: 'buyerCommentSendFlag',
            width: 200,
            hiddenInForm: true,
            type: ColumnType.RADIO,
            options: YesNoEnum
          }
          // {
          //   label: '是否上评语',
          //   prop: 'commentFlag',
          //   hiddenInForm: true,
          //   type: ColumnType.RADIO,
          //   options: YesNoEnum
          // },
          // {
          //   label: '是否上买家秀',
          //   prop: 'buyerShowFlag',
          //   hiddenInForm: true,
          //   type: ColumnType.RADIO,
          //   options: YesNoEnum
          // },
          // {
          //   label: '是否上追评',
          //   prop: 'appendCommentFlag',
          //   hiddenInForm: true,
          //   type: ColumnType.RADIO,
          //   options: YesNoEnum
          // }
          // ,
          // {
          //   label: '状态',
          //   searchable: true,
          //   type: ColumnType.RADIO,
          //   hiddenInForm: true,
          //   options: OnlineStatusEnum,
          //   prop: 'status'
          // }
        ]
      }
    }
  },
  methods: {
    async handleSubmitBuyerShow({done}) {
      try {
        await commentFollowUpApi.saveBuyerShow(this.formData)
        this.$refs.table.reloadTable()
        this.buyerShowDialogShowed = false
      } finally {
        done()
      }
    },
    handleAppendComment({arg}) {
      this.formData = {...arg}
      this.appendDialogShowed = true
    },
    async handleSaveAppendComment({done}) {
      try {
        await commentFollowUpApi.appendComment(this.formData)
        this.$refs.table.reloadTable()
        this.appendDialogShowed = false
      } finally {
        done()
      }
    },
    handleSaveBuyerShow({arg}) {
      this.formData = {...arg}
      this.buyerShowDialogShowed = true
    },
    handleSaveClickFarm({arg}) {
      // save-click-farm
      this.formData = {...arg}
      this.clickFarmDialogShowed = true
    },
    handleUpdateFollowSignTime({arg}) {
      // save-click-farm
      this.formData = {...arg}
      this.signTimeDialogShowed = true
    },
    async handleSaveUpdateFollowSignTime({done}) {
      try {
        await commentFollowUpApi.saveUpdateFollowSignTime(this.formData)
        this.$refs.table.reloadTable()
        this.signTimeDialogShowed = false
      } finally {
        done()
      }
    },
    async handleSubmitClickFarm({done}) {
      try {
        await commentFollowUpApi.saveClickFarm(this.formData)
        this.$refs.table.reloadTable()
        this.clickFarmDialogShowed = false
      } finally {
        done()
      }
    },
    handleImport() {
      this.importDialogShowed = true
    }
  }

}
</script>

